<template>
	<view class="home">
		<view class="top">
			电信明之琛通信专卖店
		</view>
		<!-- 通知栏 -->
		<view class="tips">
			<u-alert type="warning" :closable="closable" :description="description" fontSize="26rpx"></u-alert>
		</view>
		<!-- 版心 -->
		<view class="center">
			<!-- 第一板块 实时数据 -->
			<view class="data">
				<view class="data_title_box">
					<span class="red"></span>
					<span class="data_title">实时数据</span>
					<span class="data_time">{{dateTime}}</span>
				</view>
				<view class="data_bottom">
					<view class="order">
						<span class="span1">{{allNum}}</span>
						<span class="span2">订单数</span>
						<!-- <span class="span3">28</span> -->
					</view>
					<view class="send">
						<span class="span1">{{firstNum}}</span>
						<span class="span2">首次登记数</span>
						<!-- <span class="span3">10</span> -->
					</view>
					<view class="check">
						<span class="span1">{{zdNum}}</span>
						<span class="span2">转单数</span>
						<!-- <span class="span3">19</span> -->
					</view>
					<view class="product">
						<span class="span1">{{productNum}}</span>
						<span class="span2">线上产品数</span>
						<!-- <span class="span3">19</span> -->
					</view>
				</view>
			</view>
			<!-- 第二板块 -->
			<view class="popular">
				<view class="data_title_box">
					<span class="red"></span>
					<span class="data_title">数据比例</span>
				</view>
				<view class="data_people">
					<span style="color: #a8a8a8;text-align: center;">总订单较上周 <br/> <span style="color: rgb(223, 112, 132);">{{allcompareNum}}%</span></span>
					<span style="color: #a8a8a8;text-align: center;">登记数较上周 <br/> <span style="color: rgb(223, 112, 132);">{{firstcompareNum}}%</span></span>
					<span style="color: #a8a8a8;text-align: center;">转单数较上周 <br/> <span style="color: rgb(223, 112, 132); ">{{zdcompareNum}}%</span></span>
				</view>
				<view class="data_btn">
					<u-button type="error" :plain="true" text="编辑商城" shape="circle" icon="gift-fill" iconColor="#e14d5e"
						size="nomal"></u-button>
				</view>
			</view>
			<!-- 第三板块 最近一周订单 -->
			<view class="wrapper">
				<view class="data_title_box">
					<span class="red"></span>
					<span class="data_title">最近一周订单</span>
				</view>
				<SevenEcharts></SevenEcharts>
			</view>
			<view class="sexEcahrts">
				<view class="data_title_box">
					<span class="red"></span>
					<span class="data_title">消费者占比</span>
				</view>
				<SexAge></SexAge>
			</view>
			<!-- 账户余额 -->
			<!-- <view class="box">
				<view class="data_title_box">
					<span class="red"></span>
					<span class="data_title">账户余额</span>
					<span class="money">10.0元</span>
				</view>
			</view> -->
			<!-- 站位空白格 -->
			<view class="whiteBox">

			</view>
		</view>
		<!-- 版心结束 -->

	</view>
</template>
<script>
	import SevenEcharts from "./Seven.vue";
	import SexAge from "./SexAge.vue";
	export default {
		data() {
			return {
				allNum: '', //总订单数
				firstNum: '', //首次登记数
				zdNum:'',//转单数
				productNum:'',//线上产品数
				firstcompareNum:'',//首次登记较上周
				zdcompareNum:'',//转单较上周
				allcompareNum:'',//总订单较上周
				description: '通知公告：根据京东最近规定，10月7日起，所有用户更新',
				closable: true,
				dateTime: "",
				// 下面是ecahrts
				canvasId: 'canvas1',
				type: 'column',
				options: {
					legend: {
						show: true,
						data: ['销量']
					},
					xAxis: {
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						min: 0,
						max: 100
					},
					series: [{
						name: '销量',
						type: 'column',
						data: [50, 70, 60, 80, 90, 30, 40]
					}]
				}
			}
		},
		components: {
			SevenEcharts,
			SexAge,
		},
		onLoad() {
			this.getTime();
			this.load();
		},
		methods: {
			load() {
				const token = uni.getStorageSync('token');
				// 订单数
				uni.request({
					url: 'http://101.126.42.213:9090/order/allNum',
					method: 'GET',
					header: {
						'token': `${token}`
					},
					success: (res) => {
						console.log(res, '订单总数')
						this.allNum = res.data
					},
				});
				// 首次登记
				uni.request({
					url: 'http://101.126.42.213:9090/order/registrationOrderNum',
					method: 'GET',
					header:{
						'token': `${token}`
					},
					success: (res) => {
						console.log(res, '首次登记数')
						this.firstNum = res.data
					}
				});
				// 转单数
				uni.request({
					url:'http://101.126.42.213:9090/order/transOrderNum',
					method:'GET',
					header:{
						'token':`${token}`
					},
					success: (res) => {
						this.zdNum=res.data
					}
				})
				// 线上产品数
				uni.request({
					 url:'http://101.126.42.213:9090/product/staging',
					 method:'GET',
					 header:{
						 'token':`${token}`
					 },
					 success: (res) => {
						 console.log(res,'线上产品数')
					 	this.productNum=res.data[0]
					 }
				})
				// 总订单较上周
				uni.request({
					url:'http://101.126.42.213:9090/order/compareByWeek',
					method:'GET',
					header:{
						'token':`${token}`
					},
					success: (res) => {
						console.log(res,'总订单较上周')
						this.allcompareNum=res.data;
					}
				})
				// 首次登记较上周
				uni.request({
					url:'http://101.126.42.213:9090/order/registrationOrderNumCompareLastWeek',
					method:'GET',
					header:{
						'token':`${token}`
					},
					success: (res) => {
						console.log(res,'首次登记较上周')
						this.firstcompareNum=res.data;
					}
				})
				// 转单较上周
				uni.request({
					url:'http://101.126.42.213:9090/order/transOrderNumCompareLastWeek',
					method:'GET',
					header:{
						'token':`${token}`
					},
					success: (res) => {
						console.log(res,'转单较上周')
						this.zdcompareNum=res.data;
					}
				})
			},
			getTime() {
				var today = new Date();
				var year = today.getFullYear();
				var month = today.getMonth() + 1;
				var day = today.getDate();
				var hours = today.getHours();
				var minutes = today.getMinutes();
				var seconds = today.getSeconds();

				// 在小时、分钟和秒小于10的情况下添加前导零
				if (hours < 10) {
					hours = '0' + hours;
				}
				if (minutes < 10) {
					minutes = '0' + minutes;
				}
				if (seconds < 10) {
					seconds = '0' + seconds;
				}

				var dateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
				this.dateTime = dateTime
			}
		}
	}
</script>
<style src="./home.css" scoped>
</style>